miscellaneous

miscellaneous

  • 整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
  • 需要注意的是,如果要发送Cookie,Access-Control-Allow-Origin就不能设为星号,必须指定明确的、与请求网页一致的域名。同时,Cookie依然遵循同源政策,只有用服务器域名设置的Cookie才会上传,其他域名的Cookie并不会上传,且(跨源)原网页代码中的document.cookie也无法读取服务器域名下的Cookie。
  • 非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为”预检”请求(preflight)。一旦服务器通过了”预检”请求,以后每次浏览器正常的CORS请求,就都跟简单请求一样,会有一个Origin头信息字段。服务器的回应,也都会有一个Access-Control-Allow-Origin头信息字段。
  • CORS在预检请求时并不携带cookie信息,故后台此时应该放行。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    //tomcat禁止客户端缓存
    <filter>
    <filter-name>ExpiresFilter</filter-name>
    <filter-class>org.apache.catalina.filters.ExpiresFilter</filter-class>
    <init-param>
    <param-name>ExpiresDefault</param-name>
    <param-value>access 0 seconds</param-value>
    </init-param>
    </filter>

    <filter-mapping>
    <filter-name>ExpiresFilter</filter-name>
    <url-pattern>/*</url-pattern>
    <dispatcher>REQUEST</dispatcher>
    </filter-mapping>
  • 查看版本:jQuery.fn.jquery。
  • 在console里输入:document.designMode = “on”就可以直接修改网页上的内容。
  • 暗网上不流行使用各国现实的货币交易,只能用比特币,毕竟比特币去中心化的特征能最大程度保障双方的安全,因此这里也是研究比特币的重镇。
  • 科技本身就是一把双刃剑,就看人类怎么使用它。首先,构建暗网的技术对于整个互联网行业来说就很有价值。“比如构建暗网时使用了大量的区块链技术,而区块链技术在保密通讯、分布式传输等环节当中都在被使用,只不过在日常使用当中不会将所用信息都隐藏起来。
  • host文件里不能带端口。浏览器访问的网址域名后面带端口。
  • 同源策略主要限制的是不同源之间的交互操作,对于跨域内嵌的资源不受该策略限制。
  • 阻止页面被iframe内嵌,使用报文头标识:X-Frame-Options。
  • 关于”net::ERR_CONNECTION_ABORTED”和”Firebug达到了Post请求大小限制”的问题:原因:在做POST提交的时候,提交的内容大小超过2M,导致出现上面的问题。解决办法修改tomcat中的POST请求最大数据量的限制。

    1
    2
    3
    4
    5
    6
    7
    //server.xml
    <Connector port="8888" maxHttpHeaderSize="8192"
    maxThreads="10000" minSpareThreads="25" maxSpareThreads="75"
    enableLookups="false" redirectPort="8443" acceptCount="100"
    connectionTimeout="20000" disableUploadTimeout="true" URIEncoding="UTF-8"
    maxPostSize="0"/>

    即添加“maxPostSize="0",表示无限制
  • Smarty是一个使用PHP写出来的模板引擎,是目前业界最著名的PHP模板引擎之一。

  • iframe与主框架跨域互相访问:因为浏览器为了安全,禁止了不同域访问。因此只要调用与执行的双方是同域则可以相互访问。
  • 浏览器的策略:JS和CSS的位置对其他资源加载顺序的影响。
  • 因为javascript可能会来操作HTML文档的DOM树,所以,浏览器一般都不会像并行下载css文件并行下载js文件,因为这是js文件的特殊性造成的。所以,如果你的javascript想操作后面的DOM元素,基本上来说,浏览器都会报错说对象找不到。因为Javascript执行时,后面的HTML被阻塞住了,DOM树时还没有后面的DOM结点。所以程序也就报错了。
  • bigpipe:分块加载技术、HTTP分块传输编码允许服务器为动态生成的内容维持HTTP持久链接。
  • HTTP分块传输编码格式:Transfer-Encoding: chunked。如果一个HTTP消息(请求消息或应答消息)的Transfer-Encoding消息头的值为chunked,那么,消息体由数量未定的块组成,并以最后一个大小为0的块为结束。Nodejs自动开启chunked encoding(除非通过sendHeader()设置Content-Length头)。
  • 重叠Web服务器的生成时间与浏览器的渲染时间,我们不仅可以减少最终的时间延迟,也能使网页更早显示用户可见区域给用户,从而大大减少用户对延迟的感知。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    // chunk 
    HTTP/1.1 200 OK
    Server: Apache-Coyote/1.1
    Content-Type: text/html;charset=ISO-8859-1
    Transfer-Encoding: chunked
    Date: Wed, 02 Aug 2017 16:22:00 GMT

    1ac (16进制的数字,标志这个块的大小)
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    <div id="head" style="border:1px solid #ccc;">
    cnblogs logo <img src="http://mall.galaxybigdata.com/images/public/brand_logo.d9111479.png" />
    </div>
    101 (16进制的数字,标志这个块的大小)
    <br />
    <div id="content" style="border:1px solid blue;">
    csdn logo<br />
    <img src="http://mall.galaxybigdata.com/images/public/brand_logo.d9111479.png" />
    </div>
    </body>
    </html>
    0
  • 服务器的防火墙拦截xss攻击,导致提交内容时被拦截报net::ERR_CONNECTION_ABORTED、net::ERR_CONNECTION_REFUSED、net::ERR_CONNECTION_RESE。


  • 用Javascript进行base64编码,在高版本的IE浏览器(IE9以上版本),和firefox,chrome浏览器里是非常方便的。这些浏览器的window对象中内置了base64的编码和解码方法。
    var base64String = window.btoa(string) ;//编码
    var string = window.atob(base64string) ;//解码
    注意:这对编码解码方法只是支持ascii字符集编码,不支持unicode字符集。也就是如果给window.btoa方法的参数是汉字的话,该方法就会报错。办法就是先把unicode字符集编码,编码的结果就是只含有utf-8码。使用encodeURIComponent,escape方法。
    escape不编码字符有69个:,+,-,.,/,@,_,0-9,a-z,A-Z
    encodeURI不编码字符有82个:!,#,$,&,’,(,),
    ,+,,,-,.,/,:,;,=,?,@,,~,0-9,a-z,A-Z
    encodeURIComponent不编码字符有71个:!, ‘,(,),*,-,.,
    ,~,0-9,a-z,A-Z
  • 在HTML使用base64编码, 叫做Data URI scheme.
  • What is Map-Reduce?
  • Don’t iterate over lists:use map, reduce, filter。
  • Persistent data structures for efficient immutability:Mori(http://swannodette.github.io/mori/)、Immutable.js(https://facebook.github.io/immutable-js/)。 使用树的数据结构实现。
  • chrome浏览器技巧:
    Shift+Esc – 打开Chrome任务管理器,可以让你监控Chrome中每个标签的资源占用,结束不需要的标签。
    Ctrl+Shift+V – 将剪切板中癿内容无格式粘贴(丼个例子,将你从网页中复制癿 HTML 格式内容粘贴为纯文本内容)。
    Chrome浏览器的地址栏之所以被命名为Omnibar或者是Omnibox,是因为你可以通过它来完成许多任务,而不仅仅是输入URL那么简单。chrome://history、chrome://bookmarks、chrome://settings、chrome://cache、chrome://dns、chrome://flags、chrome://help。
  • Filter requests by properties,The Filters text box:domain:、method:、status-code。
  • 在Waterfall查看某个请求相对于其他请求所消耗的时间长短及先后顺序。默认是以请求发起的时间排序的,所以,瀑布流中,越靠左的请求,发起的时间越早。
  • 默认情况下,请求、响应头是按照字母表顺序显示的http头部的名字,如果想按照实际接收的顺序显示,点击上图中的view source,反之点击上图中的view parsed。
  • cookie与缓存:cookie它只是HTTP的一个头(header)字段,然后遵守HTTP标准的web服务器和客户端(浏览器)都按照这个字段的标准来执行相应的行为,cookie一个常用的目的是来实现认证,而非缓存。在HTTP中,ETag、cache-control以及Last-Modified等等字段是用来定义Web服务器和浏览器之间的缓存行为的。
  • Timing:查看请求在各个阶段对应的时间。

    各个时间段的意思:
    Queueing:浏览器会在以下情况对请求进行排队:
    有更高优先级的请求
    在这个域下,已经有6个TCP连接了,达到Chrome最大限制数量。此条规则仅适用在HTTP/1.0和HTTP/1.1
    Stalled:Queueing中的任何一个因素发生都会导致该请求被拖延
    Proxy negotiation:浏览器与代理服务器协商消耗的时间
    DNS Lookup:浏览器对请求的IP地址进行DNS查找所消耗的时间
    Initial conncection:发起连接所消耗的时间
    Request sent:请求发送消耗的时间
    Waiting (TTFB):浏览器等待响应的时间,TTFB表示Time To First Byte
    Content Download:资源下载所消耗的时间
    按total duration排序后,透明部分表示浏览器在网络上等待(即尚未收到任何响应字节)的时间,而不透明部分表示的是收到第一批响应字节后完成下载的时间。不同的颜色表示不同的资源。
  • 浏览器执行的几个步骤:
    1、处理HTML标记,构建DOM树 — 整个流程最终输出是页面的文档对象模型(DOM),浏览器对页面进行的所有进一步处理都会用到它

    2、处理CSS标记,构建CSSOM树

    3、将DOM树和CSSOM树融合成渲染树
    4、根据渲染树进行布局,计算每个节点的几何信息(layout) — The “Layout” event captures the render tree construction, position, and size calculation in the Timeline.

    5、在屏幕上绘制各个节点(painting、rasterizing)
    如果DOM或CSSOM被修改,需要再执行一遍以上所有步骤,以确定哪些像素需要在屏幕上进行重新渲染。优化关键渲染路径即尽可能地缩短上述第1步到第5步耗费的总时间。(阻塞渲染的CSS(媒体类型)、阻塞解析的JavaScript(异步加载async))
  • CRP要求DOM和CSSOM两者融合在一起才能构建渲染树。这就导致了一个性能问题:HTML和CSS都是阻塞渲染的资源。HTML很显然,没有DOM就没有内容去渲染。CSS没有那么明显,但确实是阻塞渲染的资源。既然CSS是阻塞渲染的资源,这就意味着在CSSOM构建完成之前,浏览器不会去渲染任何已处理的内容。要尽早、尽快地把CSS下载到客户端以优化首次渲染的时间。
  • 默认情况下,所有JS均会阻塞解析器,因为浏览器不知道脚本想在页面上做什么,因此它必须假定最糟的情况并阻塞解析器。但是,如果我们能够有个信号告知浏览器,说脚本无需在文档中引用它的确切位置被执行呢?这样一来,浏览器就会继续构建DOM,并在脚本准备就绪后执行脚本。这个信号就是async——在script标签里面添加async关键字,其有两个特性:
    1、告诉浏览器当它碰到